<template>
    <div class="nav-list">
        <a href="#" v-for="(item, index) in list" :key="index">{{ item }}</a>
    </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";

const list = ref(["首页", "榜单", "热点", "商城"]);
</script>

<style lang="less" scoped>
.nav-list {
    position: absolute;
    top: 46px;
    right: 12px;
    width: 110px;
    background-color: #fff;
    z-index: 20;
    box-shadow: 0 3px 9px 0 rgb(0 0 0 / 10%);
    a {
        display: inline-block;
        width: 100%;
        line-height: 45px;
        color: #333;
        font-size: 15px;
        .text-center();
        border-bottom: 1px solid #f0f0f0;
    }
}
</style>
